<template>
  <div class="he-operation">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :finished-text="operationConfig.total > 0 ? '没有更多了' : ''"
      @load="getContractOperationList"
    >
      <template v-for="item in operationList" :key="item">
        <div class="content">
          <div class="top">
            <div class="sign-name">
              发送方: <span>{{ item.sponsorName }}</span>
            </div>
            <div class="sign-content">
              <span>《{{ item.title }}》</span>
              <div class="sign-btn" type="primary">分享</div>
            </div>
          </div>
          <div class="bottom">
            <div>
              签约方: <span>{{ filterString(item.signatoryName) }}</span>
            </div>
            <div>
              发起时间: <span>{{ filterDate(item.startDate) }}</span>
            </div>
          </div>
        </div>
      </template>
    </van-list>
    <van-empty
      v-if="operationConfig.total === 0"
      class="custom-image"
      :image="imgUrl"
      description="暂无合同,去其它地方看看吧~"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from '@/store'

import { filterString, filterDate } from '@/hooks/filter'
import { getContractOperation } from '@/api/contract'

export default defineComponent({
  name: 'my-approve',
  setup() {
    const store = useStore()
    // 空状态
    const imgUrl = ref('')
    const handleImageSrc = async () => {
      const m = await import('@/assets/img/noContract.png')
      imgUrl.value = m.default
    }
    onMounted(() => {
      handleImageSrc()
    })
    // 获取数据
    const operationList = ref<any[]>([])
    const operationConfig = reactive({
      idNumber: '',
      pageNumber: 1,
      pageSize: 5,
      total: 0
    })
    operationConfig.idNumber = store.state.login.userInfo.idNumber
    const loading = ref(false)
    const finished = ref(false)
    const getContractOperationList = async () => {
      const params = {
        idNumber: operationConfig.idNumber,
        pageNumber: operationConfig.pageNumber,
        pageSize: operationConfig.pageSize
      }
      const res = await getContractOperation(params)
      if (res.code !== '0') return
      if (res.data.total) {
        console.log(res.data)
        operationConfig.total = res.data.total
        operationConfig.pageNumber++
        operationList.value.push(...res.data.records)
        loading.value = false
        if (operationList.value.length >= operationConfig.total) {
          finished.value = true
        }
      } else {
        loading.value = false
        finished.value = true
      }
    }
    return {
      imgUrl,
      operationList,
      loading,
      finished,
      operationConfig,
      filterString,
      filterDate,
      getContractOperationList
    }
  }
})
</script>

<style scoped lang="less">
.he-operation {
  height: calc(100% - 182px);
  overflow: hidden;
  overflow-y: auto;
  .content {
    width: 303px;
    height: 118.5px;
    background-color: #fff;
    margin: 10px auto 0;
    padding: 0 16px;
    .top {
      height: 87px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      border-bottom: 1px solid #e4e4e4;
      .sign-name {
        font-size: 12px;
        color: #a5a5a5;
      }
      .sign-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #101010;
        font-size: 15px;
        .sign-btn {
          width: 60px;
          height: 26px;
          background-color: #2489f2;
          border-top-left-radius: 50px;
          border-bottom-left-radius: 50px;
          border-top-right-radius: 50px;
          border-bottom-right-radius: 50px;
          line-height: 26px;
          text-align: center;
          color: #fff;
        }
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      font-size: 12px;
      color: #a5a5a5;
    }
  }
  .custom-image {
    width: 100%;
    height: 100%;
  }
}
</style>
